<!-- 
	辅助线组件
	1、辅助线背景：背景颜色、背景图片
	2、辅助线样式：solid 实线 dashed 虚线 dotted 圆点 double 双线
	3、辅助线设置：高度设置/左右边距/辅助线粗
-->
<template>
	<div class="component-wrapper" :style="wrapper_style">
		<!-- style -->
		<div :style="border_style"></div>
	</div>
</template>

<script>
	export default {
		name: 'u_line',
		props: {
			componentId: {
				type: String,
				default: ''
			},
			data: {
				type: Object,
				default () {
					return {
						// 标题栏背景设置
						previewColor: {
							// 标题栏背景类型 1=背景颜色 2=背景图片
							isColor: {
								type: String,
								default: '1'
							},
							// 背景颜色 isColor 为 1是取值
							color: {
								type: String,
								default: '#ffffff'
							},
							// 背景图片 isColor 为 2是取值
							image: {
								type: String,
								default: ''
							}
						},
						// 辅助线样式 solid 实线 dashed 虚线 dotted 圆点 double 双线
						"lineStyle": {
							type: String,
							default: 'solid'
						},
						// 辅助线颜色
						"borderColor": {
							type: String,
							default: '#333333'
						},
						//辅助线粗
						"borderWeight": {
							type: Number,
							default: 3
						},
						//左右边距
						"borderPadding": {
							type: Number,
							default: 0
						},
						//高度设置
						"searchHeight": {
							type: Number,
							default: 10
						}
					}
				}
			}
		},
		computed: {
			/** 样式 */
			wrapper_style() {
				if (this.data.previewColor) {
					const {
						previewColor,
						borderPadding,
						searchHeight,
					} = this.data;

					return `
		                background-color: ${previewColor.color};
		                background-image: url(${previewColor.isColor == 2? previewColor.image: ''});
		                background-size: 100% auto;
		                bakcground-position: center;
		                padding: ${searchHeight/2}px ${borderPadding}px;
		            `;
				}
			},
			border_style() {
				const {
					lineStyle,
					borderColor,
					borderWeight
				} = this.data;

				return `
		            width: 100%;
		            border-top: ${borderWeight}px ${lineStyle} ${borderColor};
		            `;
			}
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>

</style>
